import React from "react";
import AppleItem from './appleItem';
import { observer, inject} from "mobx-react"


function AppleBasket (props) {
    const {currentAppleList, eatedAppleList, idPicking, eatApple, pickApple, getCurrentAppleWight, getEatedAppleWight} = props.appleStore;
    const getAllAppleItem = () => {
        return currentAppleList.map(apple => {
            return <AppleItem apple={apple} eatApple={eatApple} key={apple.index}/>
        })
    }

   return (
    <div className="appleBusket">
        <div className="title">苹果篮子</div>

        <div className="stats">
            <div className="section">
                <div className="head">当前</div>
                <div className="content">{currentAppleList.length}个苹果，{getCurrentAppleWight}克
                </div>
            </div>
            <div className="section">
                <div className="head">已吃掉</div>
                <div className="content">{eatedAppleList.length}个苹果，{getEatedAppleWight}克</div>
            </div>
        </div>

        <div className="appleList">
           {getAllAppleItem()}
        </div>

        <div className="btn-div">
            <button className = {idPicking ? 'disabled' : ""} onClick={!idPicking ? pickApple : null}>{idPicking ? '正在采摘' : "摘苹果"}</button>
        </div>
    </div>
   ); 
}

export default inject('appleStore')(observer(AppleBasket));